<template>
    <Row style="background:#eee;padding:20px">
        <Col span="11">
        <Card :bordered="false">
            <p  slot="title"><Icon type="ios-film-outline"></Icon>无边框卡片</p>
            <Button type="info" slot="extra">实时</Button><span></span>
            <Button type="success"slot="extra">历史</Button><span></span>
            <Button type="warning"slot="extra">设置</Button>

            <p>卡片内容</p>
            <p>卡片内容</p>
            <p>卡片内容</p>
        </Card>
        </Col>
        <Col span="11" offset="2">
        <Card shadow>
            <p slot="title">使用阴影效果的卡片</p>
            <p>卡片内容</p>
            <p>卡片内容</p>
            <p>卡片内容</p>
        </Card>
        </Col>
    </Row>
</template>
<style>
    body {
        background-color: #ff0000;
    }
</style>
<script>
    import HeaderComponent from './components/header.vue'
    import OtherComponent from './components/other.vue'

    export default {
        data() {
            return {
                msg: 'hello vue'
            }
        },
        components: {
            'other-component': OtherComponent,
            HeaderComponent,
        }
    }
</script>